<template>
  <div class="vue-box">
    <div v-if="m != null" class="c-panel">
      <!-- tab卡片 -->
      <el-tabs v-model="activeTab" class="s-tab">

        <el-alert style="margin: 10px 0;"
                  type="blue" show-icon
                  title="车辆管理"
        >
        </el-alert>
        <!--        头部分割线-->
        <el-tab-pane label="czg-车辆管理" name="tab1"></el-tab-pane>

        <el-form :inline="true" class="demo-form-inline" style="margin:40px 0px">

          <el-form-item label="车辆类型">
            <el-select v-model="typeid" placeholder="请选择车辆类型">
              <el-option label="--请选择" value=""></el-option>
              <el-option v-for="item in trucksTypes" :key="item.id"  :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="车牌号码">
            <el-input v-model="licensePlate" placeholder="请输入车牌号码" clearable></el-input>
          </el-form-item>

          <el-form-item label="车队名称">
            <el-select v-model="fleetid" placeholder="请选择车队名称">
              <el-option label="--请选择--" value=""></el-option>
              <el-option v-for="item in fleests" :key="item.id"  :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
          <el-col :span="2"><el-button @click="truckSearch()" type="primary" icon="el-icon-search" circle></el-button></el-col>
          </el-form-item>

        </el-form>

        <el-row style="margin-top:20px">
          <el-col :span="1"><div></div></el-col>
          <el-col :span="2"><el-button icon="el-icon-plus" type="primary" @click="increased">新增</el-button></el-col>
        </el-row>

        <el-row style="margin-top:10px">
          <el-col :span="1"><div></div></el-col>
          <el-col :span="22">
            <el-table  :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}">
              <!--checkbox全选框配置-->
              <el-table-column
                type="selection"
                width="55"
                >
              </el-table-column>
              <el-table-column prop="id" label="车辆编号" fixed="true" align="center" width="120">
              </el-table-column>
              <el-table-column prop="typename" label="车辆类型" align="center" width="120">
              </el-table-column>
              <el-table-column prop="brand" label="品牌" align="center" width="120">
              </el-table-column>
              <el-table-column prop="licensePlate" label="车辆车牌" align="center" width="120">
              </el-table-column>
              <el-table-column prop="fleetname" label="所属车队" align="center" width="120">
              </el-table-column>
              <el-table-column prop="deviceGpsId" label="GPS设备ID" align="center" width="120">
              </el-table-column>
              <el-table-column prop="allowableLoad" label="准载重量(千克)" align="center" width="120">
              </el-table-column>
              <el-table-column prop="allowableVolume" label="准载体积(方)" align="center"  width="120">
              </el-table-column>
              <el-table-column prop="validityPeriod" label="过期状态" align="center" width="120">
                <template v-slot="scope">
                   <span>{{ scope.row.validityPeriod | validityPeriodFilter}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="tripsid" label="车次编号" align="center" width="120">
              </el-table-column>
              <el-table-column label="操作" align="center" fixed="right"  width="160">
                <template v-slot="pp">
                  <el-link type="primary" icon="el-icon-view" @click="examine(pp.row)">查看详情</el-link>
                |
                  <el-link type="danger" icon="el-icon-delete-solid" @click="remove(pp.row)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <el-dialog
          :title="height"
          :visible.sync="dialogVisible"
          width="35%"
        >

          <el-form :model="truck" ref="truck" label-width="120px"  class="demo-ruleForm">

            <el-row style="margin-top:10px" hidden>
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div>
                  <el-form-item>
                    <el-input  v-model="truck.id"  style="width: 180px;" size="small"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!--第一行-->
            <el-row style="margin-top:10px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div>
                  <el-form-item label="车辆类型" prop="truckTypeId">
                    <el-select  @change="selectFindById" v-model="truck.truckTypeId" :rules="{required: true, message: '车辆类型不能为空', trigger: 'blur' }">
                      <el-option v-for="item in trucksTypes" :key="item.id"  :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!--第二行-->
            <el-row style="margin-top:10px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="车牌品牌:" prop="brand" :rules="{required: true, message: '车牌品牌不能为空', trigger: 'blur' }">
                    <el-input v-model="truck.brand" style="width: 180px;" size="small" placeholder="请输入车牌品牌"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!--第三行-->
            <el-row style="margin-top:10px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="车牌号码:" prop="licensePlate" :rules="{required: true, message: '车牌号码不能为空', trigger: 'blur' }">
                    <el-input v-model="truck.licensePlate"  style="width: 180px;" size="small" placeholder="请输入车牌号码"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!--第四行-->
            <el-row style="margin-top:10px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="车队名称" prop="fleetId">
                    <el-select v-model="truck.fleetId" :rules="{required: true, message: '车队名称', trigger: 'blur' }">
                      <el-option v-for="item in fleests" :key="item.id"  :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!--第五行-->
            <el-row style="margin-top:10px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="GPS设备ID:" :rules="{required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }">
                    <el-input v-model="truck.deviceGpsId" style="width: 180px;" size="small" placeholder="请输入GPS设备ID"></el-input>
                  </el-form-item>
                </div>
              </el-col>

            </el-row>

            <!--第六行-->
            <el-row style="margin-top:10px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="准载重量:" prop="allowableLoad" :rules="{ required: true, message: '准载重量不能为空', trigger: 'blur' }">
                    <el-input :disabled="true" v-model="truck.allowableLoad" style="width: 180px;" size="small" placeholder="请输入准载重量">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;color: #2d2f33">千克</i>
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

          <!--第七行-->
          <el-row style="margin-top:10px">
            <el-col :span="2">
            </el-col>
            <el-col :span="9">
              <div class="reg-inpiut">
                <el-form-item label="准载体积:" prop="allowableVolume" :rules="{ required: true, message: '准载体积不能为空', trigger: 'blur' }">
                  <el-input :disabled="true" v-model="truck.allowableVolume" style="width: 180px;" size="small" placeholder="请输入准载体积">
                    <i slot="suffix" style="font-style:normal;margin-right: 10px;color: #2d2f33">方</i>
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel('truck')" round style="margin-right:60px">取 消</el-button>
            <el-button type="primary" round style="margin-right:200px" @click="confirm('truck')">确定</el-button>
          </span>

        </el-dialog>

        <el-dialog
          title="车辆信息详情"
          :visible.sync="dialogVisibletwo"
          width="51%"
          :show-close="false"
        >
          <el-row style="margin-top:-30px">
            <el-button type="primary" @click="div1show=true,div2show=false,div3show=false" plain style="margin-left:-20px">基本信息</el-button>
            <el-button type="primary" @click="div2show=true,div1show=false,div3show=false" plain style="margin-left:-1px">行驶证信息</el-button>
            <el-button type="primary" @click="div3show=true,div2show=false,div1show=false" plain style="margin-left:-1px">车次信息</el-button>
            <hr style="margin-top:-0.5px;margin-left:-20px;width:105%;border: 1px solid gray">
          </el-row>

          <el-form :model="PdTruckBasicsView" ref="PdTruckBasicsView" label-width="100px" class="demo-ruleForm">
            <!--车辆的基本信息-->
            <div v-show="div1show" class="el-dialog-div">
              <!--第一行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="车辆编号:">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.truckId"  style="width: 180px;" size="small" placeholder="请输入车辆编号"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="1">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="车牌号码:" prop="licensePlate" :rules="{required: true, message: '车牌号码不能为空', trigger: 'blur' }">
                      <el-input :disabled="truckdisabled" v-model="PdTruckBasicsView.licensePlate"  style="width: 180px;" size="small" placeholder="请输入车牌号码"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="3">
                </el-col>
              </el-row>

              <!--第二行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="所属机构:">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.coreOrgName"  style="width: 180px;" size="small" placeholder="请输入所属机构"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="1">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="所属车队:">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.fleetName" style="width: 180px;" size="small" placeholder="请输入所属车队"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="3">
                </el-col>
              </el-row>

              <!--第三行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="车型名称:">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.typeName"  style="width: 180px;" size="small" placeholder="请输入车型名称"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="1">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="车辆体积:" prop="allowableVolume" :rules="{required: true, message: '车辆体积不能为空', trigger: 'blur' }">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.allowableVolume"  style="width: 180px;" size="small" placeholder="请输入车辆体积">
                        <i slot="suffix" style="font-style:normal;margin-right: 10px;color: #2d2f33">方</i>
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="3">
                </el-col>
              </el-row>

              <!--第四行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="车辆载重:" prop="allowableLoad" :rules="{required: true, message: '车辆载重不能为空', trigger: 'blur' }">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.allowableLoad" style="width: 180px;" size="small" placeholder="请输入车辆载重">
                        <i slot="suffix" style="font-style:normal;margin-right: 10px;color: #2d2f33">千克</i>
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="1">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="过期状态:" prop="validityPeriod" :rules="{required: true, message: '过期状态', trigger: 'blur' }">
                      <el-input disabled style="width: 180px;" size="small" v-bind:value="PdTruckBasicsView.validityPeriod | validityPeriodFilter"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="3">
                </el-col>
              </el-row>

              <!--第五行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="工作状态:">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.status==0?'空闲':'工作'" style="width: 180px;" size="small" placeholder="请输入车辆载重">
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="1">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="载装状态:">
                      <el-input :disabled="true" v-model="PdTruckBasicsView.defaultVolume>=PdTruckBasicsView.allowableVolume?'已满载':'未满载'" style="width: 180px;" size="small" placeholder="请输入车辆载重">
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="3">
                </el-col>
              </el-row>

              <!--第六行-->
              <el-row style="margin-top:10px">
                <el-col :span="2">
                </el-col>
                <el-col :span="9">
                  <div class="reg-inpiut">
                    <el-form-item label="GPSID:" :rules="{ required: true, message: 'GPSID不能为空', trigger: 'blur' }">
                      <el-input :disabled="true"  style="width: 180px;" size="small" placeholder="请输入GPSID"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>

              <!--第七行-->
              <el-row style="margin-top:30px">
                <el-col :span="6">
                </el-col>
                <el-col :span="3">
                  <el-button type="warning" round style="margin-right:200px" v-if="showbutton==1" @click="truckcompile()">编辑</el-button>
                  <el-button type="primary" round style="margin-right:200px" @click="basicDataDetermination('PdTruckBasicsView')" :style="{ display: showbutton==1?'none':'' }">确定</el-button>
                </el-col>
                <el-col :span="2">
                </el-col>
                <el-col :span="3">
                  <el-button round style="margin-right:100px" v-if="showbutton==1" @click="truckreturn">返回</el-button>
                  <el-button round style="margin-right:100px" @click="truckcancel()" :style="{ display: showbutton==1?'none':'' }">取消</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form>

          <el-form :model="PdTruckBasicsView" ref="PdTruckBasicsView" label-width="100px" class="demo-ruleForm">
          <div v-show="div2show" class="el-dialog-div">
              <!--第一行-->
                <el-row style="margin-top:20px">
                  <el-col :span="2">
                  </el-col>
                  <el-col :span="9">
                    <div class="reg-inpiut">
                      <el-form-item label-width="120px" label="行驶证号:" prop="id" :rules="{required: true, message: '驾驶证号不能为空', trigger: 'blur' }">
                        <el-input :disabled="truckLicensedisabled" v-model="PdTruckBasicsView.id" type="number" style="width: 180px;" size="small" placeholder="请输入驾驶证号"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="1">
                  </el-col>
                  <el-col :span="9">
                    <div class="reg-inpiut">
                      <el-form-item label-width="120px" label="发动机号码:" prop="engineNumber" :rules="{ required: true, message: '发动机号不能为空', trigger: 'blur' }">
                        <el-input :disabled="truckLicensedisabled" v-model="PdTruckBasicsView.engineNumber"  style="width: 180px;" size="small" placeholder="请输入发动机号"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                </el-row>

              <!--第二行-->
            <el-row style="margin-top:20px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="注册时间:" prop="registrationDate" :rules="{required: true, message: '注册时间不能为空', trigger: 'blur' }">
                    <el-date-picker :disabled="truckLicensedisabled" size="small" style="width: 180px;" v-model="PdTruckBasicsView.registrationDate" type="date" placeholder="请选择注册时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="1">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="强制报废日期:" prop="mandatoryScrap" :rules="{ required: true, message: '强制报废日期不能为空', trigger: 'blur' }">
                    <el-date-picker :disabled="truckLicensedisabled" size="small" style="width: 180px;" v-model="PdTruckBasicsView.mandatoryScrap" type="date" placeholder="请选择强制报废日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="2">
              </el-col>
            </el-row>

              <!--第三行-->
            <el-row style="margin-top:20px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="整备质量:" prop="overallQuality" :rules="{required: true, message: '整备质量不能为空', trigger: 'blur' }">
                    <el-input :disabled="truckLicensedisabled" v-model="PdTruckBasicsView.overallQuality" type="number" style="width: 180px;" size="small" placeholder="请输入整备质量">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;color: #2d2f33">千克</i>
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="1">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="检验有效期:" prop="expirationDate" :rules="{ required: true, message: '检验有效期不能为空', trigger: 'blur' }">
                    <el-date-picker :disabled="truckLicensedisabled" size="small" style="width: 180px;" v-model="PdTruckBasicsView.expirationDate" type="date" placeholder="请选择检验有效期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
              </el-col>
            </el-row>

              <!--第四行-->
            <el-row style="margin-top:20px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="核定载质量:" prop="allowableWeight" :rules="{required: true, message: '核定载质量不能为空', trigger: 'blur' }">
                    <el-input :disabled="truckLicensedisabled" v-model="PdTruckBasicsView.allowableWeight" type="number" style="width: 180px;" size="small" placeholder="请输入核定载质量">
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;color: #2d2f33">千克</i>
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="1">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="有效期:" prop="validityPeriod" :rules="{ required: true, message: '有效期不能为空', trigger: 'blur' }">
                    <el-date-picker :disabled="truckLicensedisabled" size="small" style="width: 180px;" v-model="PdTruckBasicsView.validityPeriod" type="date" placeholder="请选择有效期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
              </el-col>
            </el-row>

            <!--第五行-->
            <el-row style="margin-top:20px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="道路运输证号:" prop="transportCertificateNumber" :rules="{required: true, message: '道路运输证号不能为空', trigger: 'blur' }">
                    <el-input :disabled="truckLicensedisabled" v-model="PdTruckBasicsView.transportCertificateNumber" style="width: 180px;" size="small" placeholder="请输入道路运输证号"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!--第六行-->
            <el-row style="margin-top:20px">
              <el-col :span="2"></el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label-width="120px" label="行驶证图片:" :rules="{required: true, message: '行驶证图片不能为空', trigger: 'blur' }">
                    <el-upload
                      class="avatar-uploader"
                      action="/api/pd-basecjj/pd-truck-license/uploadcontroller"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      name="myfile"
                      :disabled="truckLicensedisabled"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

           <!--第七行-->
            <el-row style="margin-top:30px">
              <el-col :span="6">
              </el-col>
              <el-col :span="3">
                <el-button type="warning" round style="margin-right:200px" v-if="truckLicenseButton==1" @click="truckLicenseCompile()">编辑</el-button>
                <el-button type="primary" round style="margin-right:200px" @click="drivingLicenseConfirmed('PdTruckBasicsView')" :style="{ display: truckLicenseButton==1?'none':'' }">确定</el-button>
              </el-col>
              <el-col :span="2">
              </el-col>
              <el-col :span="3">
                <el-button round style="margin-right:100px" v-if="truckLicenseButton==1" @click="truckLicenseReturn()">返回</el-button>
                <el-button round style="margin-right:100px" @click="truckLicenseCancel()" :style="{ display: truckLicenseButton==1?'none':'' }">取消</el-button>
              </el-col>
            </el-row>

            </div>
          </el-form>

          <el-form :model="PdTruckBasicsView" ref="PdTruckBasicsView" label-width="100px" class="demo-ruleForm">
          <div v-show="div3show" class="el-dialog-div">
            <!--第一行-->
            <el-row style="margin-top:20px">
              <el-col :span="2">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="所属线路:" :rules="{required: true, message: '所属线路不能为空', trigger: 'blur' }">
                    <el-input :disabled="true" v-model="PdTruckBasicsView.lineName" type="number" style="width: 180px;" size="small" placeholder="请输入所属线路"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="1">
              </el-col>
              <el-col :span="9">
                <div class="reg-inpiut">
                  <el-form-item label="所属车次:" :rules="{ required: true, message: '载装状态不能为空', trigger: 'blur' }">
                    <el-input :disabled="true" v-model="PdTruckBasicsView.tripsName"  style="width: 180px;" size="small" placeholder="请输入所属车次"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="3">
              </el-col>
            </el-row>

            <!--第二行-->
            <el-row style="margin-top:20px">
              <el-col :span="6">
              </el-col>
              <el-col :span="3">
              </el-col>
              <el-col :span="2">
                <el-button round style="margin-right:100px" @click="tripsreturn()">返回</el-button>
              </el-col>
              <el-col :span="3">
              </el-col>
            </el-row>
          </div>
          </el-form>

        </el-dialog>

      </el-tabs>


    </div>
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment'
export default {
  name: 'sp-basics-vehicle',
  data() {

    const time={
      id:"",
      status:"",
      //车辆类型表
      typeid:"",
      typename:"",
      brand:"",
      licensePlate:"",
      //车队表
      fleetid:"",
      fleetname:"",
      deviceGpsId:"",
      allowableLoad:"",
      allowableVolume:"",
      //车次表
      transport_trips_id:"",
      //车辆行驶表行驶证有效期
      validityPeriod:""
    }

    return {
      tableData:[time],
      //分页信息
      currentpage:1,
      pagesize:5,
      total:0,
      //搜索框的参数绑定
      typeid:'',
      fleetid:'',
      licensePlate:'',
      m: null,		//
      activeTab: 'tab1', // 当前显示的tab
      //打开或关闭对话框
      dialogVisible:false,
      //车辆详情对话框
      dialogVisibletwo:false,
      div1show:true,
      div2show:false,
      div3show:false,
      //对话框头部
      height:'',
      truck:{
        id:"",
        truckTypeId:"",
        fleetId:"",
        brand:"",
        licensePlate:"",
        deviceGpsId:"",
        allowableLoad:"",
        allowableVolume:"",
        status:""
      },
      //车辆类型下拉框
      trucksTypes: [],
      //车队下拉框
      fleests:[],
      PdTruckBasicsView:{
        allowableLoad:"",
        allowableVolume:"",
        coreOrgName:"",
        defaultVolume:"",
        defaultWeight:"",
        fleetName:"",
        licensePlate:"",
        lineName:"",
        pdTruckLicense:"",
        tripsId:"",
        tripsStatus:"",
        truckId:"",
        typeName:"",
        tripsName:'',
        status:'',
        id:"",
        engineNumber:"",
        registrationDate:"",
        mandatoryScrap:"",
        expirationDate:"",
        overallQuality:"",
        allowableWeight:"",
        outsideDimensions:"",
        validityPeriod:"",
        transportCertificateNumber:"",
        picture:"",
      },
      //图片显示
      imageUrl:"",
      //基本按钮的显示和隐藏
      showbutton:1,
      //基本数据的禁用和显示
      truckdisabled:true,
      //行驶证按钮的显示和隐藏
      truckLicenseButton:1,
      //行驶证表单提交按钮的显示和隐藏
      truckLicensedisabled:true,
    }
  },
  async created(){

    let kk= await this.f5();
    let oo= await this.truckPage();
    let pp= await this.selectTruckType()
    this.selectPdFleet();

  },
  methods: {
    // 创建一个默认cfg对象
    create_m: function() {
      return {
        logoUrl: '',	// 系统logo地址
        appName: this.$root.title || '', // 系统名称
        appVersionNo: 'v1.0.0',	// 系统版本
        appVersionLog: '更新于2099-10-1',	// 更新日志
      }
    },
    // 初始化配置
    init: function(str) {
      // 获取
      var cfg = sa.JSONParse(str, {});	// 用户配置
      var default_cfg = this.create_m();		// 默认配置
      // 遍历
      for (var key in default_cfg) {
        if (cfg[key] !== undefined && cfg[key] !== null) {
          default_cfg[key] = cfg[key];
        }
      }
      // 赋值
      this.m = default_cfg;
    },
    // 刷新
    f5: function(){
      sa.ajax('/SpCfg/getCfg', { cfgName: 'app_cfg' }, function(res){
        this.init(res.data);
      }.bind(this));
    },
    // 新增车辆类型
    increased(){
      this.dialogVisible=true;
      this.height='新增车辆';
    },
    //查看车辆详情
    async examine(truck){

      this.dialogVisibletwo=true;

      let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck/selectVehicledetails',truck);

      this.PdTruckBasicsView=axiosResponse.data[0];

      this.imageUrl=this.PdTruckBasicsView.picture;

    },
    //删除车辆
    remove(truck){

      this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {

        let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck/deleteTruck/',truck);

        if (axiosResponse.data == true) {

          this.$message({
            type: 'success',
            message: '删除车辆成功'
          });

          this.truckPage();

        }else{

          this.$message({
            type: 'error',
            message: '删除车辆失败'
          });

          this.truckPage();

        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //分页查询车辆
    async truckPage(){

      let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck/truckPage',{
        currentpage:this.currentpage,
        pagesize:this.pagesize,
        typeid:this.typeid,
        fleetid:this.fleetid,
        licensePlate:this.licensePlate,
      });

      this.tableData=axiosResponse.data.list
      this.total=axiosResponse.data.total

    },
    //分页的条数
    handleSizeChange(val){

      this.pagesize=val;
      this.truckPage();

    },

    //分页的页数
    handleCurrentChange(val){

      this.currentpage=val;
      this.truckPage();

    },
    //搜索
    truckSearch(){

      this.truckPage();

    },
    //查询车辆类型信息
    async selectTruckType(){

      let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-type/selectTruckType');

      this.trucksTypes=axiosResponse.data;

    },
    //查询车队列表
    async selectPdFleet(){

      let axiosResponse = await axios.post('/api/pd-aggregationcjj/pd-fleet/queryCoreOrgListAll');

      this.fleests=axiosResponse.data.data;
    },
    //根据车辆类型编号查询车辆类型
    async selectFindById(){

      let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-type/selectFindById',{id:this.truck.truckTypeId});

      this.truck.allowableLoad=axiosResponse.data.allowableLoad;

      this.truck.allowableVolume=axiosResponse.data.allowableVolume;

    },
    //取消
    cancel(truck){

      this.dialogVisible=false;
      this.truck={};
      this.$refs[truck].resetFields();

    },
    //确定
    confirm(truck){

      this.$refs[truck].validate(async(valid) => {

        if (valid) {

          let axiosResponse = await axios.post("/api/pd-basecjj/pd-truck/saveTruck",this.truck);

          if (axiosResponse.data == true) {

            this.$message({
              type: 'success',
              message: '新增车辆成功'
            });

            this.cancel(truck);

            this.truckPage();

          } else {

            this.$message({
              type: 'error',
              message: '新增车辆失败',
              duration: 1000,
            });

            this.cancel(truck);

            this.truckPage();

          }

        }

      })

    },
    //对话框的回调
    handleDialogClose(){

      this.dialogVisible=false;

      this.truckType={}

    },
    //基本数据编辑
    truckcompile(){

      this.showbutton=0;

      this.truckdisabled=false;

    },
    //基本数据确定
    basicDataDetermination(PdTruckBasicsView){

      this.$refs[PdTruckBasicsView].validate(async(valid) => {

        this.dialogVisibletwo=false;

        if(valid){

          let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck/updateTruck',this.PdTruckBasicsView);

          if (axiosResponse.data == true) {

            this.$message({
              type: 'success',
              message: '编辑车辆成功'
            });

            this.showbutton=1;

            this.PdTruckBasicsView={}

            this.truckPage();

          } else {

            this.$message({
              type: 'error',
              message: '编辑车辆失败',
              duration: 1000,
            });

            this.truckPage();

          }

        }

      })

    },
    //基本数据取消
    truckcancel(){

      this.showbutton=1;

      this.truckdisabled=true;

    },
    //基本数据返回
    truckreturn(){

      this.dialogVisibletwo=false;

    },
    //行驶证信息编辑
    truckLicenseCompile(){

      this.truckLicenseButton=0;

      this.truckLicensedisabled=false;

    },
    //行驶证信息确定
    drivingLicenseConfirmed(PdTruckBasicsView){

      this.$refs[PdTruckBasicsView].validate(async(valid) => {

        this.dialogVisibletwo=false;

        if(valid){

          let axiosResponse = await axios.post('/api/pd-basecjj/pd-truck-license/updateTruckLicense',this.PdTruckBasicsView);

          if (axiosResponse.data == true) {

            this.$message({
              type: 'success',
              message: '编辑行驶证信息成功'
            });

            this.truckLicenseButton=1;

            this.truckLicensedisabled=true

            this.PdTruckBasicsView={}

            this.truckPage();

          } else {

            this.$message({
              type: 'error',
              message: '编辑行驶证信息失败',
              duration: 1000,
            });

            this.truckPage();

          }

        }

      })

    },
    //上传成功的方法
    handleAvatarSuccess(res, file) {
      // console.log(res)
      this.imageUrl = res;
      this.PdTruckBasicsView.picture = this.imageUrl;
    },
    //上传action
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;


      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    //行驶证信息取消
    truckLicenseCancel(){

      this.truckLicenseButton=1;

      this.truckLicensedisabled=true;

    },
    //行驶证信息返回
    truckLicenseReturn(){

      this.dialogVisibletwo=false

    },
    //车次信息返回
    tripsreturn(){

      this.dialogVisibletwo=false;

    },
  },
  //过滤器
  filters: {
    validityPeriodFilter: function (value) {
      let isBefore = moment(moment(new Date()).format("YYYY-MM-DD")).isBefore(
        moment(value).format("YYYY-MM-DD")
      );
      return isBefore == true ? "未过期" : "已过期";
    },
  },
}
</script>

<style scoped>

.vue-box{height: 100%; overflow: hidden;}

.c-panel{height: calc(100% - 0em); position: relative;}

.s-tab{height: 100%; }

.el-col{
  border: 1px solid transparent;
}

.el-dialog__header {
  padding:10px 10px 10px;
  background-color: rgb(0, 255, 93)
}

.el-dialog-div {
  height: 57vh;
  overflow-x: hidden;
}

.avatar-uploader.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-table__fixed-right{
  height: 100% !important;
}

</style>
